<template>
  <div class="login-box">
    <el-card class="card">
      <el-form ref="loginFormRef" :model="account" :rules="loginFormRules">
        <el-form-item prop="username">
          <el-input v-model="account.username" prefix-icon='el-icon-user-solid' placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="account.password" prefix-icon='el-icon-lock' type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="remember">
          <el-checkbox v-model="account.remember">记住密码</el-checkbox>
        </el-form-item>
        <div class="btn">
          <el-button @click="submit" :loading='loading' class="loginbtn" type="primary" plain>
            <span v-if="!loading">登录</span>
            <span v-else>登录中</span>
          </el-button>
          <el-button @click="resetLoginForm" class="resetbtn" type="info" plain>重置</el-button>
        </div>

      </el-form>
    </el-card>
  </div>
</template>
<script>
const Base64 = require('js-base64').Base64;
import {api_login} from '@/api/user/user.js'
import Cookies from "js-cookie";
export default {
  created(){
    this.getCookie();
  },
  data(){
    return{
      //账户
      account:{
        username:'',
        password:'',
        remember:'',
      },
      //防抖
      ousername:'',
      opassword:'',
      //表单验证
      loginFormRules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
      },
      //loading
      loading:false,

    }
  },
  methods:{
    //登录接口
    getLogin(){
      api_login(this.account).then((res)=>{
        console.log(res);
        this.loading=false;
        this.ousername = this.account.username;
        this.opassword = this.account.password;
        if (res.data.meta.status!==200) {
          return this.$message.error(res.data.meta.msg)
        }else{
          this.$message.success(res.data.meta.msg);
          this.$router.push({path:'/Home'})
          window.sessionStorage.setItem('token',res.data.data.token);
        }

      })
    },
    submit(){
      this.$refs.loginFormRef.validate(valid=>{
        if (!valid) return
        if (this.account.remember) {
          Cookies.set("username", this.account.username, { expires: 30 });
          Cookies.set("password", Base64.encode(this.account.password), { expires: 30 });
          Cookies.set('remember', this.account.remember, { expires: 30 });
        } else {
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove('remember');
        }
        if (this.ousername==this.account.username&&this.opassword==this.account.password) return;
        this.loading=true;
        this.getLogin();
      })
    },
    //重置登录表单
    resetLoginForm(){
      this.$refs.loginFormRef.resetFields();
      for(let k in this.account) {
        this.account[k]='';
      }
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const remember = Cookies.get('remember')
      this.account = {
        username: username === undefined ? this.account.username : username,
        password: password === undefined ? this.account.password : Base64.decode(password),
        remember: remember === undefined ? false : Boolean(remember)
      };
    },
  },
}
</script>
<style lang='less' scoped>
.login-box{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  .card{
    width: 320px;
    .btn{
      display: flex;
      justify-content: space-around;
      .loginbtn,.resetbtn{
        width: 100px;
      }
    }
  }
}

</style>
